<template>
  <div>
    <div ref="aplayer"></div>
  </div>
</template>

<script setup lang="ts">
import music from '@/assets/js/music'
import APlayer from 'aplayer'
import 'APlayer/dist/APlayer.min.css' // 引入音乐插件的样式
import { onMounted, ref } from 'vue'

const aplayer = ref<HTMLElement | null>(null)
const initApplayer = () => {
  const ap = new APlayer({
    container: aplayer.value!,
    listFolded: true,
    fixed: true,
    audio: music,
  })
  console.log(ap)
}
onMounted(() => {
  initApplayer()
})
</script>

<style scoped lang="scss">
:deep(.aplayer) {
  &.aplayer-narrow .aplayer-body {
    left: -66px;
    transition: all .3s ease;
  }
  &.aplayer-narrow:hover .aplayer-body {
    left: 0;
  }
}
</style>
